import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { BasicColumn, BasicTable, useTable } from "@/components/Table";
import Toolbar from "@/components/ViewComponents/Toolbar";
import "./index.less";
import { useTranslation } from "react-i18next";

const index = () => {
	const { t } = useTranslation();
	const en_vi = "Hospitalization.inpatientDrugUseReport";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.fromDate`),
			field: "Procedure",
			component: "DatePicker"
		},
		{
			label: t(`${en_vi}.toDate`),
			field: "To",
			component: "DatePicker"
		},
		{
			label: t(`${en_vi}.classification`),
			field: "classification",
			component: "Select"
		}
	];
	const [formRegister] = useForm({
		schemas,
		labelWidth: 100,
		showActionButtonGroup: true,
		actionColOptions: { span: 24 },
		baseColProps: {
			span: 7
		}
	});
	const leftColumns: BasicColumn[] = [
		{
			title: t(`${en_vi}.department`),
			dataIndex: "Department"
		}
	];
	const [leftRegister] = useTable({
		columns: leftColumns,
		useSearchForm: false,
		bordered: true
	});
	const centerColumns: BasicColumn[] = [
		{
			title: t(`${en_vi}.medicine`),
			dataIndex: "medicine"
		}
	];
	const [centerRegister] = useTable({
		columns: centerColumns,
		useSearchForm: false,
		bordered: true
	});
	const rightColumns: BasicColumn[] = [
		{
			title: t(`${en_vi}.ward`),
			dataIndex: "ward"
		}
	];
	const [rightRegister] = useTable({
		columns: rightColumns,
		useSearchForm: false,
		bordered: true
	});
	const handlerToolbarAction = (key: string) => {
		console.log(key);
	};
	return (
		<div className="printExportSlip page">
			<div className=" page-content">
				<div className="block">
					<BasicForm register={formRegister}></BasicForm>
				</div>
				<div className="table">
					<div className="table_item">
						<BasicTable register={leftRegister}></BasicTable>
					</div>
					<div className="table_item">
						<BasicTable register={centerRegister}></BasicTable>
					</div>
					<div className="table_item">
						<BasicTable register={rightRegister}></BasicTable>
					</div>
				</div>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["save"]} />
		</div>
	);
};
export default index;
